<template>
    <div class="main">
      <div class="gallery">
        <div class="gallery-item" v-for="item of dataList">
          <div class="img-item">
            <img  :src="item.src" >
          </div>
            <p>{{item.text}}</p>
        </div>
        
    </div>

    </div>
</template>
  
<script>
  
export default {
  name: 'ExploreList',
  methods: {
    
  },
  components: {

},
data() {
  return {
    dataList:[
      {
        src:'https://www.swiftour.life/profile/upload/assets/1.png',
        text:"Get best travel events based on your preference"
      },
      {
        src:"https://www.swiftour.life/profile/upload/assets/2.png",
        text:"Collaborate with your travel companion"
      },
      {
        src:"https://www.swiftour.life/profile/upload/assets/3.png",
        text:"Generate daily itinerary within 1 minute	"
      },
      {
        src:"https://www.swiftour.life/profile/upload/assets/4.png",
        text:"Optimize your route"
      },
      {
        src:"https://www.swiftour.life/profile/upload/assets/5.png",
        text:"Get best price and make booking"
      },
      {
        src:"https://www.swiftour.life/profile/upload/assets/6.png",
        text:"Discuss with professional travelers"
      }
    ]
  };
}

};
</script>
<style scoped>
  main {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }
        .gallery {
            width: 90%;
            max-width: 1000px;
            margin: 20px auto;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        .gallery-item {
            flex: 1 1 calc(50% - 20px);
            box-sizing: border-box;
        }
        .gallery-item img {
          width: 300px;
            height: 200px;
            display: block;
        }
        .gallery-item p {
            margin: 10px 0 0;
            font-weight: 500;
            font-size: 1rem;
            text-align: center;
        }
        @media (max-width: 768px) {
            .gallery-item {
                flex: 1 1 calc(100% - 20px);
            }
        }
      
.img-item{
  display: flex;
  justify-content: center;
}
</style>